<!-- 数据可视化中心-数据准备-数据源基本信息管理 -->
<template>
  <el-container class="custom__container">
    <el-main class="custom__main">
      <hsa-adaptive-container>
        <!-- 查询 -->
        <hsa-adaptive-pane>
          <hsa-title-pane>
            <hsa-title-pane-item title="查询条件">
              <el-form label-width="100">
                <hsa-row :gutter="20">
                  <hsa-col :span="8">
                    <el-form-item label="策略名称">
                      <el-input />
                    </el-form-item>
                  </hsa-col>
                  <template #footbar>
                    <el-button type="default">重置</el-button>
                    <el-button type="primary">搜索</el-button>
                  </template>
                </hsa-row>
              </el-form>
            </hsa-title-pane-item>
          </hsa-title-pane>
        </hsa-adaptive-pane>

        <!-- 数据源管理 -->
        <hsa-adaptive-pane>
          <hsa-title-pane>
            <hsa-title-pane-item title="策略配置" fill>
              <template #toolbar>
                <el-button type="primary" @click="createItem">新增</el-button>
              </template>
              <hsa-table v-bind="tableOption"></hsa-table>
            </hsa-title-pane-item>
          </hsa-title-pane>
        </hsa-adaptive-pane>
      </hsa-adaptive-container>
      <strategy-config-dialog ref="strategyConfigDialogRef"></strategy-config-dialog>
      <strategy-config-edit-dialog ref="strategyConfigEditDialogRef"></strategy-config-edit-dialog>
      <show-detail-dialog ref="showDetailDialogRef"></show-detail-dialog>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import strategyConfigDialog from "./popup/strategy-config-dialog.vue"
import strategyConfigEditDialog from "./popup/strategy-config-edit-dialog.vue"
import showDetailDialog from "./popup/show-detail-dialog.vue"
// 类型
import type { HsaTableColumn } from "hsa-ui";
interface Tree {
  label: string;
  children?: Tree[];
}

const strategyConfigDialogRef=ref(null) 
const strategyConfigEditDialogRef=ref(null)
const showDetailDialogRef=ref(null)
const createItem=()=>{
    strategyConfigDialogRef.value.open()
}
const editItem=(row:any)=>{
    strategyConfigEditDialogRef.value.open(row)
}
const showDetail=(row:any)=>{
    showDetailDialogRef.value.open(row)
}
// 表格配置
const tableOption = reactive({
  showIndex: true,
  data: ref<any[]>([
    {
      date: "2016-05-02",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "端口",
    },
    {
      date: "2016-05-04",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "端口",
    },
    {
      date: "2016-05-01",
      name: "王小虎",
      state: "驱动类型",
      city: "192.168.168.222",
      zip: "端口",
    },
    {
      date: "2016-05-03",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "65535",
    },
  ]),
  columns: ref<HsaTableColumn[]>([
    { align: "center", label: "车略名称", width: 220, prop: "date" },
    { align: "center", label: "数据库", minWidth: 200, prop: "name" },
    { align: "center", label: "数据表", width: 150, prop: "state" },
    { align: "center", label: "数据集缓存策略", width: 160, prop: "city" },
    { align: "center", label: "查询脚本及结果", width: 100, prop: "zip" },
    { align: "center", label: "查询脚本及结果", width: 100, prop: "zip" },
    {
      type: "button",
      label: "操作",
      width:140,
      buttonGroup: [
        {
          label: "编辑",
          type: "primary",
          click: (row) => {
            console.log("编辑", row);
            editItem(row)
          },
        },
        {
          label: "删除",
          type: "danger",
          display: (row) => {
            return row.status !== 1; // 根据条件显示按钮
          },
          click: (row) => {
            console.log("删除", row);
          },
        },
        {
          label: "展示",
          type: "primary",
          display: (row) => {
            return row.status !== 1; // 根据条件显示按钮
          },
          click: (row) => {
            console.log("展示", row);
            showDetail(row)
          },
        },
      ],
    },
  ]),
});

// 目录配置
const treeOption = reactive({
  data: ref<Tree[]>([
    {
      label: "第一组",
      children: [
        {
          label: "第二组",
          children: [
            {
              label: "第三组",
            },
          ],
        },
      ],
    },
  ]),
  defaultProps: {
    children: "children",
    label: "label",
  },
  "node-click": (data: Tree) => {
    console.log(data);
  },
});

// 表格配置
const switchover = ref(false);
</script>

<style lang="scss" scoped>
// 容器
.custom__container {
  height: 100%;
  width: 100%;
  position: relative;
}

// 左侧
.custom__aside {
  background: #fff;
  height: 100%;
  width: 100%;

  // 头部
  .custom__aside-header {
    padding: 10px;
    padding-bottom: 0px;
  }

  // 分割线
  .custom__aside-divider {
    margin-bottom: 5px;
  }

  // 内容
  .custom__aside-content {
    box-sizing: border-box;
    padding: 10px;
    padding-top: 5px;
    height: calc(100% - 94px);
    overflow-y: auto;
  }
}

// 主要内容
.custom__main {
  padding: 0;
  padding-left: 10px;
}
</style>
